<template>
  <div class="xh-user">
    <div class="xh-user__hd">
      员工
    </div>
    <div class="xh-user__bd">
      <el-input
        v-model="searchInput"
        placeholder="搜索成员"
        size="small"
        prefix-icon="el-icon-search"
        class="search-input"/>
      <div
        v-loading="loading"
        class="search-list">
        <el-checkbox
          :indeterminate="isIndeterminate"
          :disabled="radio"
          v-model="checkAll"
          class="all-check"
          @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group
          ref="checkboxGroup"
          v-model="selectIds"
          :max="max"
          @change="changeCheckout">
          <el-checkbox
            v-for="(item, i) in showList"
            :key="i"
            :label="item.userId"
            class="colleagues-list">
            <xr-avatar
              :name="item.realname"
              :size="24"
              :src="item.img"
              class="user-img" />
            <span>{{ item.realname }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="xh-user__ft">
      <span class="select-info">已选择<span class="select-info--num">{{ selectIds.length }}</span>项</span>
      <el-button link @click="clearAll">清空</el-button>
    </div>
  </div>
</template>

<script setup>
import { userListAPI } from '/src/api/common.js'
import { objDeepCopy } from '/src/utils/index.js'
import PinyinMatch from 'pinyin-match'
import {ref,watch,computed, onMounted} from "vue"


defineOptions({
  name: 'XhUser', // 新建 user
})

const props = defineProps({
  show: {
    type: Boolean,
    default: true
  },
  radio: {
    type: Boolean,
    default: false
  },
  // 已选信息
  selectedData: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 请求加强
  infoType: {
    type: String,
    default: 'default' // 返回全部  crm_contract crm_receivables oa_examine 合同审核人自选列表
  },
  // 自定义请求
  infoRequest: Function,
  infoParams: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const emits = defineEmits(['changeCheckout',])

const list=ref([])
const selectIds=ref([]) // 选择项
const loading=ref(false) // 加载动画
const searchInput=ref('')
const checkAll=ref(false)
const isIndeterminate=ref(false)


const showList = computed(()=> {
  return list.value.filter(item => {
    return PinyinMatch.match(item.realname || '', searchInput.value)
  })
})

const max = computed(() =>{
  return props.radio ? 1 : undefined
})

watch(() => props.selectedData, (value) => {
  if (props.show) {
    checkItems(value)
  }
})

watch(() => props.show, (value) =>{
  if (value) {
    if (list.value && list.value.length == 0) {
      getUserList()
    } else {
      checkItems(props.selectedData)
    }
  }
})

onMounted(() => {
  if (props.show) {
    getUserList()
  }
})


/**
 * 获取数据
 */
function getUserList() {
  loading.value = true
  getRequest()(getParams())
      .then(res => {
        list.value = res.data.data.list || res.data.data
        checkItems(props.selectedData)
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
}

/**
 * 请求
 */
function getRequest() {
  if (props.infoRequest) {
    return props.infoRequest
  } else if (props.infoType === 'default') {
    return userListAPI
  } else if (
      props.infoType === 'crm_contract' ||
      props.infoType === 'crm_invoice' ||
      props.infoType === 'crm_receivables' ||
      props.infoType === 'oa_examine'
  ) {
    return userListAPI
  }
}

function getParams() {
  const params =
      props.infoParams && Object.keys(props.infoParams.length !== 0)
          ? props.infoParams
          : {}
  if (props.infoType === 'default') {
    params.pageType = 0
    return params
  } else if (
      props.infoType === 'crm_contract' ||
      props.infoType === 'crm_invoice' ||
      props.infoType === 'crm_receivables' ||
      props.infoType === 'oa_examine'
  ) {
    params.pageType = 0
    return params
  }
}

/**
 * 勾选
 */
function changeCheckout(val) {
  refreshAllCheck(val.length)
  const selectItems = []
  for (let index = 0; index < list.value.length; index++) {
    const item = list.value[index]
    if (val.includes(item.userId)) {
      selectItems.push(item)
    }
  }
  emits('changeCheckout', selectItems, val)
}

/**
 * 全部勾选
 */
function handleCheckAllChange(val) {
  selectIds.value = val
      ? list.value.map(item => {
        return item.userId
      })
      : []
  isIndeterminate.value = false
  const selectItems = val ? list.value : []
  emits('changeCheckout', objDeepCopy(selectItems), selectIds.value)
}

/**
 * 刷新总check
 */
function refreshAllCheck(checkedCount) {
  checkAll.value = checkedCount === list.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < list.value.length
}

/**
 * 标记勾选
 */
function checkItems(items) {
  selectIds.value = items.map(item => {
    return item.userId
  })
  refreshAllCheck(selectIds.value.length)
}

/**
 * 清空全部
 */
function clearAll() {
  selectItems.value = []
  emits('changeCheckout', [], [])
}
</script>


<script type="text/javascript">
export default {
  components: {},
  props: {},
  data() {return {}},
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
/* 选择员工 */
.user-img {
  margin-right: 8px;
  vertical-align: middle;
}
.search-list {
  padding: 5px 0;
  height: 200px;
  overflow: auto;
}
.colleagues-list {
  padding: 5px 0;
  display: block;
  margin-left: 0;
}

.xh-user {
  color: #333;
  font-size: 12px;
  &__hd {
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid $xr-border-line-color;
  }

  &__bd {
    padding: 10px 12px;
  }

  &__ft {
    padding: 5px 12px;
    background: #f7f8fa;
    border-top: 1px solid $xr-border-line-color;
    .el-button {
      font-size: 12px;
    }
  }
}

// 选择信息
.select-info {
  display: inline-block;
  width: calc(100% - 30px);

  &--num {
    color: $xr-color-primary;
  }
}

// check样式
.el-checkbox-group {
  overflow-x: hidden;
}

.el-checkbox {
  :deep(.el-checkbox__label) {
    color: #333;
  }
}

.all-check {
  display: inline-block;
  padding: 5px 0;
}

.search-input {
  :deep(.el-input__inner) {
    background-color: #F4F4F4;
    border: none;
  }
}
</style>
